<template>
	<view>
		<view style="height: 400upx;background-color: #05052B; display: flex;position: relative;background-size: 1150upx 400upx;background-repeat: no-repeat;">
			<view style="height: 50upx;line-height: 50upx;font-size: 38upx;color: #ffffff;margin-top: 20upx;width: 750upx;">
				<view style="display: flex;margin-top: 30upx;flex-direction: row-reverse;">
					<view style="margin: 0 30upx;">
						<image src="../../static/shezhi.png" style="width: 46upx;height: 46upx;" @click="jump" data-src="../commission/qrcode/qrcode"></image>
					</view>
					<view>
						<image src="../../static/kefu.png" style="width: 50upx;height: 50upx;" @click="jump" data-src="/pages/commission/qrcode/invite_code"></image>
					</view>
				</view>
				<!-- <view style="margin-top: 170upx;">
					<image src="../../static/qiandaoicon.png" style="width: 80upx;height: 80upx;" @click="jump" data-src="sign/sign"></image>
				</view> -->
			</view>
			<!-- 昵称 -->
			 <view style="height: 60upx;line-height: 60upx;font-size: 38upx;color: #ffffff;margin-left: -680upx;display: flex;flex-direction: row-reverse;">
					<view style="margin-top: 120upx;">
						<image :src="res.avatar||avatar" @click="jump" data-src="/pages/member/info/info" style="width: 128upx;height: 128upx;border-radius:50%;border:4upx solid #fff;" mode=""></image>
					</view>
					
					<view style="margin-left: 30upx;font-size: 38upx;position: absolute;top: 100upx;left: 180upx;color: #fff;">
						<view class="">
							{{res.nickname||nickname}}
							<image src="../../static/edit.png" mode="widthFix" style="width: 45upx;margin-left: 20upx;" @click="jump" data-src="../member/sign/sign"></image>
						</view>
						<view class="lv">
							<text>我的邀请码：{{res.yqm}}</text>
						</view>
						<view class="lv">
							<image src="../../static/gate1.png" mode="widthFix" style="width: 150upx;margin-top: 8upx;" v-show="res.level == 5"></image>
							<image src="../../static/gate2.png" mode="widthFix" style="width: 150upx;margin-top: 8upx;" v-show="res.level == 6"></image>
							<image src="../../static/gate3.png" mode="widthFix" style="width: 150upx;margin-top: 8upx;" v-show="res.level == 7"></image>
							<image src="../../static/gate4.png" mode="widthFix" style="width: 150upx;margin-top: 8upx;" v-show="res.level == 8"></image>
							<image src="../../static/gate5.png" mode="widthFix" style="width: 150upx;margin-top: 8upx;" 
							v-show="res.level != 5 && res.level != 6 &&res.level != 7 &&res.level != 8"></image>
						</view>
					</view>
			 </view>
			 
		</view>
		<view class="list" style="padding: 20upx;margin-top:-120upx;overflow: hidden;">
			<view class="uni-list bottom_" style="overflow: hidden;">
				<!-- <view class="uni-list-cell" data-src="../gift_income/gift">
					<view class="uni-list-cell-navigate uni-navigate-right">
						<image src="../../static/jilu.png" mode="" style="visibility: hidden;"></image>
						<text class="text" style="font-size: 32upx;font-weight: 555;margin-left: -46upx;">我的钱包</text>
					</view>
				</view> -->
				<view class="uni-list-cell" style="height: 200upx;display: flex;justify-content: space-around;background: url(../../static/126.jpg) no-repeat center;">
					<view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="./details/lx/lx">
						<image style="width: 50upx;height: 50upx;margin: 0 auto;" src="../../static/honhbao.png" mode=""></image>
						<view>红包</view>
						<view style="font-size: 24upx;font-weight: 555;color: #000;">{{res.credit2||credit2}}</view>
					</view>
					<view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="./details/bz">
						<image style="width: 50upx;height: 50upx;margin: 0 auto;" src="../../static/tangmili.png" mode=""></image>
						<view>易豆</view>
						<view style="font-size: 24upx;font-weight: 555;">{{res.bz||bz}}</view>
					</view>
					<view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="./details/tzz">
						<image style="width: 50upx;height: 50upx;margin: 0 auto;" src="../../static/yuanbao.png" mode=""></image>
						<view>易通</view>
						<view style="font-size: 24upx;font-weight: 555;">{{res.tzz||tzz}}</view>
					</view>
					<view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="./details/credit">
						<image style="width: 50upx;height: 50upx;margin: 0 auto;" src="../../static/52.png" mode=""></image>
						<view>积分</view>
						<view style="font-size: 24upx;font-weight: 555;">{{res.credit1||credit1}}</view>
					</view>
					<view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="./details/djz/djz">
						<image style="width: 50upx;height: 50upx;margin: 0 auto;" src="../../static/jiedong.png" mode=""></image>
						<view>钱包冻结</view>
						<view style="font-size: 24upx;font-weight: 555;">{{res.ywallet||credit1}}</view>
					</view>
				</view>
				<view class="uni-list-cell" style="height: 200upx;display: flex;justify-content: space-around;background: url(../../static/126.jpg) no-repeat center;">
					<view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="./details/ydz/ydz">
						<image style="width: 50upx;height: 50upx;margin: 0 auto;" src="../../static/tangmili.png" mode=""></image>
						<view>易豆值</view>
						<view style="font-size: 24upx;font-weight: 555;color: #000;">{{res.djbz}}</view>
					</view>
					<view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="./details/ytz/ytz">
						<image style="width: 50upx;height: 50upx;margin: 0 auto;" src="../../static/yuanbao.png" mode=""></image>
						<view>易通值</view>
						<view style="font-size: 24upx;font-weight: 555;color: #000;">{{res.djtzz}}</view>
					</view>
					<view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="./details/jfz/jfz">
						<image style="width: 50upx;height: 50upx;margin: 0 auto;" src="../../static/52.png" mode=""></image>
						<view>积分值</view>
						<view style="font-size: 24upx;font-weight: 555;color: #000;">{{res.djjfz}}</view>
					</view>
					<view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="./details/djz/fhz">
						<image style="width: 50upx;height: 50upx;margin: 0 auto;" src="../../static/fenhong.png" mode=""></image>
						<view>分红值</view>
						<view style="font-size: 24upx;font-weight: 555;color: #000;">{{res.fenhongzhi}}</view>
					</view>
					<view style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="./details/djz/thq">
						<image style="width: 50upx;height: 50upx;margin: 0 auto;" src="../../static/tihuo.png" mode=""></image>
						<view>提货券</view>
						<view style="font-size: 24upx;font-weight: 555;">{{res.tihuoquan}}</view>
					</view>
					<view v-if="res.yjxs==1" style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="./details/djz/djz">
						<view>前一天业绩</view>
						<view style="font-size: 24upx;font-weight: 555;">{{res.yeji}}</view>
					</view>
					<view v-if="res.yjxs==1" style="display: flex;flex-direction: column;text-align: center;" @click="jump" data-src="./details/djz/djz">
						
						<view>业绩拨出比例</view>
						<view style="font-size: 24upx;font-weight: 555;">{{res.yjbl}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="short_all" style="margin-top: 30upx;">
			<view class="nav" style="border-radius: 15upx;padding-top: 0;">
				<view class="top" >
					<view class="uni-list">
						<view class="uni-list-cell" :hover-class="active" @click="jump" data-src="../order/order?index=0">
							<view class="uni-list-cell-navigate uni-navigate-right">
								<image src="../../static/order4.png" mode=""></image>
								<text class="text" style="font-size: 32upx;font-weight: 550;">全部订单</text>
								<text class="right">查看全部订单</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cont clear">
					<view class="list" v-for="(item,index) in order" :key="index" @click="jump" :data-src="item.src">
						<image style="width: 80upx;height: 80upx;" :src="item.icon" mode=""></image>
						<text>{{item.text}}</text>
						<uni-badge :text="item.badge" type="danger" style="background-color: #05052B;" v-if="item.badge > 0"></uni-badge>
					</view>
				</view>
			</view>
			
			<view class="user">
					<!-- 用户功能 -->
					<view class="com-item">
						<view class="com-wrap">
							<view class="cell" @click="jump" :data-src="item.path" v-for="(item, index) in userList" :key="index" hover-class="btn-hover">
								<view class="cell-left">
									<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
									<view class="cell-text">{{ item.title }}</view>
								</view>
								<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
							</view>
						</view>
					</view>
			
					<!-- 用户服务 -->
					<view class="com-item">
						<view class="com-wrap">
							<view class="cell" @click="jump" :data-src="item.path" v-for="(item, index) in serverList" :key="index" hover-class="btn-hover">
								<view class="cell-left">
									<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
									<view class="cell-text">{{ item.title }}</view>
								</view>
								<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			<!-- 横向flex图文数据列表 -->
			<!-- <view style="display: flex;background-color: #FFFFFF;">
				<view style="flex: 1;width: 150upx;height: 220upx;text-align: center;border-right:4upx solid #eeeeee;" @click="jump" data-src="./details/a_kzp">
					<image src="../../static/jifen_1.png" style="width: 80upx;height: 70upx;margin-top: 30upx;" mode=""></image>
					<view style="height: 50upx;line-height: 50upx;font-size: 28upx;">可提现收益</view>
					<view style="">{{res.a_kzp}}</view>
				</view>
				<view style="flex: 1;width: 150upx;height: 220upx;text-align: center;border-right:4upx solid #eeeeee;" @click="jump" data-src="./details/credit">
					<image src="../../static/jifen.png" style="width: 80upx;height: 80upx;margin-top: 20upx;" mode=""></image>
					
					<view style="height: 50upx;line-height: 50upx;font-size: 28upx;">积分值</view>
					<view style="">{{res.credit1}}</view>
				</view>
				<view style="flex: 1;width: 150upx;height: 220upx;text-align: center;border-right:3upx solid #eeeeee;" @click="jump" data-src="./details/bz">
					<image src="../../static/bz.png" style="width: 80upx;height: 80upx;margin-top: 20upx;" mode=""></image>
					<view style="height: 50upx;line-height: 50upx;font-size: 28upx;">币值</view>
					<view style="">{{res.bz}}</view>
				</view>
				<view style="flex: 1;width: 150upx;height: 220upx;text-align: center;" @click="jump" data-src="./details/tzz">
					<image src="../../static/zhengquan.png" style="width: 80upx;height: 80upx;margin-top: 20upx;" mode=""></image>
					<view style="height: 50upx;line-height: 50upx;font-size: 28upx;">通证值</view>
					<view style="">{{res.tzz}}</view>
				</view>
			</view> -->
			
			
			<!-- 广告 -->
			<!-- <view>
				<image src="../../static/gerenzhongxin_1.png" class="img_1" @click="jumpto" style="border-radius: 80upx;"></image>
			</view> -->
			<view class="history-section icon" style="overflow: hidden;margin: 30upx 0;">
				<view class="sec-header">
					<text class="yticon icon-lishijilu"></text>
					<text style="font-size: 32upx;font-weight: 550;">浏览历史</text>
				</view>
				<scroll-view scroll-x class="h-list">
					<view v-for="(img,index) in data" :key="index" style="display: inline-block;">
						<image @click="jumpgoods(img.goodsid)" :src="img.thumb" mode="aspectFill"></image>
						<image @click="navTo('/goods/detail?goodsid=' + img.goodsid)" :src="img.thumb" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
			
		</view>
		
	</view>
</template>
<script>
	import uniIcons from '@/components/uni-icon/uni-icon.vue';
	import uniBadge from "../../components/uni-badge.vue";
	export default {
		data() {
			return {
				tzz: '0',
				credit2: '0',
				bz: '0',
				a_kzp: '0',
				credit1:'0',
				nickname:'游客',
				avatar:'../../static/33.jpg',
				res:[],
				order:[{
					text: '待付款',
					icon:'../../static/456.png',
					src:'../order/order?index=1',
					badge: 0
				},{
					text: '待发货',
					icon:'../../static/123.png',
					src:'../order/order?index=2',
					badge: 0
				},{
					text: '待收货',
					icon:'../../static/111.png',
					src:'../order/order?index=3',
					badge: 0
				},{
					text: '已完成',
					icon:'../../static/789.png',
					src:'../order/order?index=4',
					badge: 0
				}],
				userList: [
								{
									title: '会员充值',
									icon: '../../static/004.png',
									path: '/pages/coin/recharge'
								},
								{
									title: '我的关注',
									icon: '../../static/guanzhuw.png',
									path: 'favorite'
								},
								{
									title: '地址管理',
									icon: '../../static/menu1.png',
									path: './address/address'
								},
								{
									title: '分享专用',
									icon: '../../static/menu_six.png',
									path: '../commission/qrcode/invite_code'
								},
								{
									title: '关于我们',
									icon: '../../static/menu_three.png',
									path: '../commission/qrcode/about_us'
								},
								{
									title: '我的大数据',
									icon: '../../static/dashujv.png',
									path: '../commission/qrcode/vip'
								}
							],
							serverList: [
								{
									title: '会员资料',
									icon: '../../static/huiyuanziliao.png',
									path: './info/info'
								},
								{
									title: '安全中心',
									icon: '../../static/003.png',
									path: 'no'
								},
								{
									title: '银行卡绑定',
									icon: '../../static/menu5.png',
									path: '../member/bankcard/bankcard'
								},
								{
									title: '实名认证',
									icon: '../../static/yhkbd.png',
									path: 'verified/verified'
								},
							],
				is_realname:'',
				active:"active",
				openid:'',
				data:[],
			};
		},
		components: {
			uniBadge,
			uniIcons
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		onNavigationBarButtonTap:function(e){
			uni.navigateTo({
				url: 'info/info'
			});
    },
		methods:{
			setAjax(){
				uni.request({
					url: 'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member&app=1',
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						// console.log(res)
						uni.hideLoading()
						this.res = res.data
						this.is_realname = res.data.is_realname
						var order = this.order
						for(var i in order){
							this.order[i].badge = res.data.order[i]
						}
					},
					fail: () => {},
					complete: () => {}
				});
				// 浏览历史
				uni.request({
					url: 'http://mall.zhongzhengyicai.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.history.get_list&app=1',
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						this.data = res.data.result.list
						// console.log(this.data)
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			jump(e){
				// console.log(e)
				if(e.currentTarget.dataset.src=='no'){
					this.jumpno()
				}
				uni.navigateTo({
					url: e.currentTarget.dataset.src
				});
			},
			jumpno () {
				uni.showModal({
				title:'提示',
				content:'功能即将开放',
				showCancel: false,
				confirmColor:"#DD524D",
					success() {
						return
					}
				})
			},
			jumptab(e){
				uni.switchTab({
					url:e.currentTarget.dataset.src
				})
			},
			jumpcart(e){
				// console.log('/pages'+e.currentTarget.dataset.src);return;
				uni.switchTab({
					url: '/pages/cart/cart'
				});
			},
			jumpto() {
				uni.navigateTo({
					url: '/pages/commission/qrcode/invite_code'
				})
			},
			setup(){
				uni.navigateTo({
					url: './info/info'
				});
			}
		}
	}
</script>

<style lang="scss">
	.btn-hover {
		background: #f2f2f2 !important;
	}
	
	.bottom_ {
		margin-bottom: 18upx;
	}
	.short_all {
		width: 95%;
		margin: 0 auto;
	}
	.flexfather {
		display: flex;
	}
	.flexfather view {
		flex: 1;
		
	}
	.imgbgc {
		width: 100%;
		height: 400upx;
		border-radius: 0 0 300upx 300upx/0 0 36upx 36upx;
		background-size: cover;
		opacity: 0.80;
	}
	.img_1 {
		width: 100%;
		height: 200upx;
		margin-top: 20upx;
	}
	.img_11 {
		width: 150upx;
		height: 150upx;
	}
	* {box-sizing:border-box;}
	.btn {padding:20upx 24upx;}
	.btn button {margin:20upx 0;font-size:28upx;padding:8upx;}
	.btn .changePwd {background:#fff;border:2upx solid  #175e3c;color:#175e3c;}
	.btn .logout {border-color:#175e3c;background-image: linear-gradient(to bottom, rgb(243, 109, 31), rgb(252, 9, 9));color: #fff;margin-bottom: -40upx; }
	.btn .logout_1 {border-color:#175e3c;background-image: linear-gradient(to bottom, rgb(243, 109, 31), rgb(252, 9, 9));color: #fff;}
	.headinfo {height:290upx;overflow:hidden;position:relative;z-index:10;}
	.headinfo>image {position:absolute;width:750upx;height:290upx;}
	.headinfo .info {padding:80upx 40upx 0;position:relative;z-index:1;}
	.headinfo .info .top {position:absolute;top:0;left:0;width:750upx;padding:20upx 10upx;z-index:1;}
	.headinfo .info .top image {width:34upx;height:34upx;float:right;margin-right:20upx;}
	.headinfo .info .userinfo .webkit image {width:128upx;height:128upx;border-radius:50%;border:4upx solid #fff;margin-right:24upx;}
	.headinfo .info .userinfo .webkit .flex .name {height:50upx;color:inherit;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-align:left;font-size:40upx;line-height:40upx;color:#fff;margin-bottom:6upx;/* padding-top:10upx;*/}
	.headinfo .info .userinfo .webkit .flex .lv text {display:block;line-height:36upx;font-size:24upx;color:#fff;}
	.headinfo .kefu {height:110upx;width:170upx;position:absolute;right:-4upx;bottom:-8upx;transform:rotate(8deg);}
	.uni-list-cell.active {background:#f5f5f5;}
	.uni-list image {width:40upx;height:40upx;}
	.uni-list .text {position:absolute;left:84upx;font-size:30upx;color: #444;}
	.uni-list {margin-top:20upx;border-radius: 15upx;}
	.uni-list:before,.uni-list:after {display:none;}
	.uni-list-cell:after {content:" ";position:absolute;left:0.5rem;right:0.5rem;bottom:-1px;height:1px;border-top:1px solid #ebebeb;color:#D9D9D9;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transform:scaleY(0.5);-ms-transform:scaleY(0.5);transform:scaleY(0.5);background:none;}
	.uni-list-cell .right {font-size:24upx;color:#999;margin-right:20upx;}
	.uni-list .uni-list-cell:last-child:after {border:0;}
	.uni-list .uni-badge {margin-right:15px;background-color:#f55;}
	.nav {padding-top:40upx;background:#fff;margin-top:-40upx;}
	.nav .top {border-bottom:1px solid #f5f5f5;}
	.nav .top .uni-list {margin:0;}
	.nav .cont {background:#fff;}
	.nav .cont .list {float:left;width:25%;padding:28upx 0;position:relative;}
	.nav .cont .list image {width:50upx;height:50upx;margin:0 auto;display:block;}
	.nav .cont .list text {text-align:center;display:block;font-size:26upx;margin-top:10upx;}
	.nav .uni-badge {position:absolute;top:4upx;right:40upx;background:#f55;}
	.xvqian {display:unset;border: 1px solid #fff;border-radius: 5px;padding: 5px;color: #fff;margin-left:5px;}
	
	.history-section{
		padding: 30upx 0 0;
		margin-top: 20upx;
		background: #fff;
		border-radius:10upx;
		.sec-header{
			display:flex;
			align-items: center;
			// font-size: $font-base;
			// color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;
			.yticon{
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}
		.h-list{
			white-space: nowrap;
			padding: 30upx 30upx 0;
			image{
				display:inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
.btn-hover {
	background: #f2f2f2 !important;
}
.user {
	.user-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50vw;
		padding: 30rpx;
		z-index: 9;
		border-radius: 0 0 20% 20%;
		background: url('https://handsel.oss-cn-shenzhen.aliyuncs.com/1588938371592.jpg') no-repeat;
		background-size: cover;
		.setting {
			color: #fff;
			position: absolute;
			top: 60rpx;
			left: 60rpx;
			font-size: 50rpx;
		}
		.info {
			position: absolute;
			text-align: center;
			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
			.nickname {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
	.order-status {
		padding: 0 20rpx;
		margin-top: -10vw;
		.status-wrap {
			border-radius: 25rpx;
			overflow: hidden;
			.status-list {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				background: #fff;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				.status-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.item-icon {
						line-height: 1;
						font-size: 65rpx;
						color: #bbb;
					}
					.item-text {
						font-size: 28rpx;
						color: #666;
						margin-top: 5rpx;
					}
				}
			}
		}
	}
	.com-item {
		// padding-left: 20rpx;
		// padding-right: 20rpx;
		margin-top: 20rpx;
		.com-wrap {
			border-radius: 25rpx;
			overflow: hidden;
		}
	}
	.cell {
		height: 80rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #f8f8f8;
		&:active {
			background: #f2f2f2;
		}
		&:last-child {
			border-bottom: none !important;
		}
		.cell-left {
			display: flex;
			align-items: center;
			.cell-icon {
				width: 40rpx;
				height: 40rpx;
			}
			.cell-text {
				color: #000;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
		.iconfont {
			font-size: 40rpx;
			color: #999;
		}
	}
}
</style>

